import React, { useState, useEffect } from 'react';
import { 
  ShoppingBag, 
  ShieldCheck, 
  Info, 
  ArrowRight, 
  Search, 
  Menu, 
  X, 
  ChevronRight,
  Gavel,
  History,
  Lock
} from 'lucide-react';

// Mock Data for Art Pieces
const ART_ITEMS = [
  {
    id: 1,
    title: "Ancestral Echoes Mask",
    artist: "Kwadwo Afari",
    basePrice: 450,
    category: "Sculpture",
    image: "https://images.unsplash.com/photo-1518998053574-53f0201f9b0d?auto=format&fit=crop&q=80&w=800",
    description: "Hand-carved ebony wood with authentic copper inlays."
  },
  {
    id: 2,
    title: "Continuity of Spirit",
    artist: "Zanele Mbeki",
    basePrice: 1200,
    category: "Canvas",
    image: "https://images.unsplash.com/photo-1582555172866-f73bb12a2ab3?auto=format&fit=crop&q=80&w=800",
    description: "Oil on canvas exploring the lineage of the Great Zimbabwe."
  },
  {
    id: 3,
    title: "Terracotta Warrior Head",
    artist: "Ifé Bronze Works",
    basePrice: 850,
    category: "Artifact",
    image: "https://images.unsplash.com/photo-1549490349-8643362247b5?auto=format&fit=crop&q=80&w=800",
    description: "A reimagining of 12th-century Yoruba craftsmanship."
  },
  {
    id: 4,
    title: "Market Day Vibrations",
    artist: "Oluwatobi J.",
    basePrice: 320,
    category: "Textile",
    image: "https://images.unsplash.com/photo-1513519245088-0e12902e5a38?auto=format&fit=crop&q=80&w=800",
    description: "Woven kente patterns integrated into contemporary street art."
  }
];

const App = () => {
  const [isVerified, setIsVerified] = useState(false);
  const [showVerification, setShowVerification] = useState(false);
  const [verifying, setVerifying] = useState(false);
  const [cart, setCart] = useState([]);
  const [equityMultiplier, setEquityMultiplier] = useState(4.5); // 450% surcharge for unverified

  // Calculations
  const calculatePrice = (basePrice) => {
    return isVerified ? basePrice : basePrice * equityMultiplier;
  };

  const handleVerify = () => {
    setVerifying(true);
    // Simulating external check at checkingRace.com
    setTimeout(() => {
      setIsVerified(true);
      setVerifying(false);
      setShowVerification(false);
    }, 2500);
  };

  return (
    <div className="min-h-screen bg-[#0a0a0a] text-stone-100 font-sans">
      {/* Top Banner */}
      <div className="bg-amber-700 text-white py-2 px-4 text-center text-xs font-bold tracking-widest uppercase">
        {isVerified 
          ? "Verification Confirmed: Heritage Discount Applied" 
          : "Notice: Equity Pricing in Effect for Non-Descendants"}
      </div>

      {/* Navigation */}
      <nav className="border-b border-stone-800 bg-black/50 backdrop-blur-md sticky top-0 z-40">
        <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="flex items-center gap-8">
            <h1 className="text-xl font-serif italic font-bold tracking-tighter">
              MyAfricanArt<span className="text-amber-500">.com</span>
            </h1>
            <div className="hidden md:flex gap-6 text-sm text-stone-400">
              <a href="#" className="hover:text-amber-500 transition-colors">Shop</a>
              <a href="#" className="hover:text-amber-500 transition-colors">Reparations Policy</a>
              <a href="#" className="hover:text-amber-500 transition-colors">Heritage</a>
            </div>
          </div>
          
          <div className="flex items-center gap-4">
            <button 
              onClick={() => setShowVerification(true)}
              className={`flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-semibold border transition-all ${
                isVerified 
                ? "border-green-500 text-green-500" 
                : "border-amber-600 text-amber-500 hover:bg-amber-600/10"
              }`}
            >
              <ShieldCheck size={14} />
              {isVerified ? "VERIFIED" : "VERIFY STATUS"}
            </button>
            <div className="relative cursor-pointer">
              <ShoppingBag size={20} className="text-stone-300" />
              {cart.length > 0 && (
                <span className="absolute -top-2 -right-2 bg-amber-600 text-[10px] w-4 h-4 rounded-full flex items-center justify-center">
                  {cart.length}
                </span>
              )}
            </div>
          </div>
        </div>
      </nav>

      <main className="max-w-7xl mx-auto px-4 py-12">
        {/* Hero Section */}
        <header className="mb-16 text-center">
          <h2 className="text-4xl md:text-6xl font-serif mb-6 max-w-3xl mx-auto leading-tight">
            Art that pays forward the <span className="text-amber-500">debts of history.</span>
          </h2>
          <p className="text-stone-400 max-w-xl mx-auto mb-8 leading-relaxed">
            Every purchase includes a structured reparations surcharge. We redistribute capital through art. 
            Heritage holders can verify their status via <strong>checkingRace.com</strong> for standard pricing.
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <button className="bg-stone-100 text-black px-8 py-3 rounded-none font-bold hover:bg-amber-500 transition-colors flex items-center gap-2">
              BROWSE COLLECTION <ChevronRight size={18} />
            </button>
          </div>
        </header>

        {/* Pricing Notice */}
        {!isVerified && (
          <div className="mb-12 bg-stone-900/50 border border-amber-900/30 p-6 rounded-xl flex flex-col md:flex-row items-center gap-6">
            <div className="bg-amber-900/20 p-4 rounded-full text-amber-500">
              <Gavel size={32} />
            </div>
            <div className="flex-1">
              <h3 className="text-lg font-bold text-amber-500 mb-1">Equity Pricing Active</h3>
              <p className="text-sm text-stone-400">
                You are currently being charged the <strong>Global Reparations Premium (450%)</strong>. 
                This fund supports the artists and their home communities directly. 
                Are you a descendant? Submit your pass to bypass the surcharge.
              </p>
            </div>
            <button 
              onClick={() => setShowVerification(true)}
              className="w-full md:w-auto px-6 py-2 bg-amber-600 text-white rounded font-bold text-sm"
            >
              START VERIFICATION
            </button>
          </div>
        )}

        {/* Art Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {ART_ITEMS.map((item) => (
            <div key={item.id} className="group flex flex-col">
              <div className="relative aspect-[4/5] overflow-hidden bg-stone-900 mb-4">
                <img 
                  src={item.image} 
                  alt={item.title}
                  className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700"
                />
                {!isVerified && (
                  <div className="absolute top-4 right-4 bg-black/80 backdrop-blur px-2 py-1 text-[10px] font-black text-amber-500 border border-amber-500/50">
                    REPARATIONS PRICE APPLIED
                  </div>
                )}
              </div>
              <div className="flex justify-between items-start mb-1">
                <h4 className="font-bold text-stone-200">{item.title}</h4>
                <div className="text-right">
                  {isVerified ? (
                    <span className="text-stone-100 font-bold">${item.basePrice}</span>
                  ) : (
                    <div className="flex flex-col items-end">
                      <span className="text-stone-500 line-through text-xs">${item.basePrice}</span>
                      <span className="text-amber-500 font-bold text-lg">${calculatePrice(item.basePrice)}</span>
                    </div>
                  )}
                </div>
              </div>
              <p className="text-xs text-stone-500 mb-4">{item.artist}</p>
              <button 
                onClick={() => setCart([...cart, item])}
                className="mt-auto border border-stone-700 py-2 text-xs font-bold hover:bg-stone-100 hover:text-black transition-colors"
              >
                ADD TO COLLECTION
              </button>
            </div>
          ))}
        </div>
      </main>

      {/* Footer */}
      <footer className="mt-24 border-t border-stone-800 py-12 px-4 bg-black">
        <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12 text-sm text-stone-500">
          <div>
            <h5 className="text-stone-200 font-bold mb-4">OUR MISSION</h5>
            <p className="leading-relaxed">
              MyAfricanArt.com is more than a marketplace. It is a financial instrument of restorative justice. 
              We ensure that the economic flow follows the cultural flow, correcting centuries of extraction.
            </p>
          </div>
          <div>
            <h5 className="text-stone-200 font-bold mb-4">VERIFICATION INFO</h5>
            <p className="leading-relaxed">
              Verification is handled externally via <strong>checkingRace.com</strong>. We do not store biometric 
              or ancestral data. Once verified, your browser will hold an encrypted "Pass" token.
            </p>
          </div>
          <div>
            <h5 className="text-stone-200 font-bold mb-4">LEGAL</h5>
            <p className="leading-relaxed">
              Prices are non-negotiable. Surcharges are automatically allocated to our 
              Pan-African Artist Trust. By browsing, you agree to Equity Pricing.
            </p>
          </div>
        </div>
      </footer>

      {/* Verification Modal / Overlay */}
      {showVerification && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/90 backdrop-blur-sm">
          <div className="bg-[#121212] border border-stone-800 w-full max-w-md p-8 relative">
            <button 
              onClick={() => setShowVerification(false)}
              className="absolute top-4 right-4 text-stone-500 hover:text-white"
            >
              <X size={20} />
            </button>

            {!verifying ? (
              <div className="text-center">
                <div className="w-16 h-16 bg-amber-600/10 text-amber-500 rounded-full flex items-center justify-center mx-auto mb-6">
                  <ShieldCheck size={32} />
                </div>
                <h3 className="text-xl font-bold mb-2">Heritage Verification</h3>
                <p className="text-stone-400 text-sm mb-8">
                  Please connect to your <strong>checkingRace.com</strong> profile to verify your "n-word pass" 
                  or ancestral lineage status. This will unlock the 75% Heritage Discount.
                </p>
                <div className="space-y-3">
                  <button 
                    onClick={handleVerify}
                    className="w-full bg-amber-600 hover:bg-amber-700 text-white py-3 rounded font-bold transition-colors"
                  >
                    CONNECT TO CHECKINGRACE.COM
                  </button>
                  <button 
                    onClick={() => setShowVerification(false)}
                    className="w-full border border-stone-700 hover:border-stone-500 py-3 rounded font-bold transition-colors text-xs text-stone-400"
                  >
                    CONTINUE WITH EQUITY PRICING
                  </button>
                </div>
              </div>
            ) : (
              <div className="text-center py-12">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-500 mx-auto mb-6"></div>
                <h3 className="text-lg font-bold mb-2">Verifying Passport...</h3>
                <p className="text-stone-500 text-sm italic">Scanning database for lineage records...</p>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
};

export default App;